<template>
	<view class="view">
		<view class="card-box">
			<view class="header-box">
				<img :src="friendInfo.head" alt="" srcset="">
			</view>
			<view class="name-box">
				<view class="name-top">
					<text class="name-text">{{friendInfo.name?friendInfo.name:''}}</text>
					<text class="pos-text">{{friendInfo.position?friendInfo.position:''}}</text>
				</view>
				<view class="name-btm">
					{{friendInfo.company?friendInfo.company:''}}
				</view>
			</view>
			<view class="check-card" @click="goToFriendMainPage">
				查看名片
			</view>
		</view>






		<view class="video-box">
			<view class="video-title">
				他的视频
			</view>
			<view class="">
				<scroll-view class="scrollWp" :scroll-y="true" @scrolltolower="$u.debounce(scrolltolower,300)"
					:lower-threshold="lowerThreshold">
					<view style="display: flex; flex-direction: row; flex-wrap: wrap;justify-content: space-between;">
						<view class="videoItem" v-for="(list,index) in dataList" :key="index">
							<u--image showLoading radius="6rpx" :src="list.cover?list.cover:list.photo" width="100%" height="506rpx"
								mode="aspectFill" @click="towxh5Video(index)" :key="index"></u--image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 个人视频 -->

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				windowWidth: 0,
				windowHeight: 0,
				dataList: [],
				personVideoList: [],
				lowerThreshold: 100,
				pageNo: 1,
				total: 0,
				firstLoad: false,
				friendInfo: {},
				friendCardId: '',
				pageSize: 10,
				friendOpenId: '',
				activityIndex: 0,
				tabs: [{
					title: '公司视频'
				}, {
					title: '个人视频'
				}]
			}
		},
		onPullDownRefresh() {
			this.reLoading()
		},
		async onLoad(opt) {
			uni.showLoading({

			})
			console.log(opt, 'opt');
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			if (uni.getSystemInfoSync().platform == 'ios') {
				var model = uni.getSystemInfoSync().model
				if (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8') {
					this.windowHeight = (uni.getSystemInfoSync().screenHeight) - 125
				} else {
					this.windowHeight = uni.getSystemInfoSync().screenHeight
				}
			} else {
				this.windowHeight = uni.getSystemInfoSync().screenHeight
			}
			this.friendOpenId = opt.openId
			this.friendCardId = opt.cardId

			if (this.friendCardId && this.friendOpenId) {
				await this.getUserInfoByCardId(this.friendCardId)
				await this.getVideoList()
			} else {
				uni.showToast({
					title: '获取用户信息失败',
					icon: 'none'
				});
			}

		},
		methods: {

			async getfriendInfo(openId) {
				let res = await this.$api.queryCurrentCardByOpenId({
					openId
				})
				if (res.success && res.result) {
					console.log(res.result, 'res.result');
					this.getVideoList()
				}

			},
			//通过cardId 查询
			async getUserInfoByCardId(cardId) {
				let res = await this.$api.queryCartById({
					id: cardId
				})
				if (res.success && res.result) {
					this.friendInfo = res.result
					return res.result
				} else {
					this.friendInfo = {}
					return null
				}

			},
			towxh5Video(index) {
				let list = []
				let videoNumber = 36; //（请输入 6 的倍数，来控制 DOM 节点的总视频数量）
				let dotNumber = videoNumber / 2;
				let inf = (index + 1) - dotNumber;
				console.log('点击了第' + (index + 1) + '个视频.');
				let beforeLocation = 0;
				let afterLocation = 0;
				let location = 0;
				if (inf <= 0) {
					beforeLocation = 0;
					location = index;
					for (let i = 0; i <= index; i++) {
						list.push(this.dataList[i]);
					}
				} else {
					beforeLocation = inf;
					location = index - inf;
					for (let i = inf; i <= index; i++) {
						list.push(this.dataList[i]);
					}
				}
				let onf = this.dataList.length - (index + 1)
				console.log('下方视频数：' + onf);
				if (onf <= dotNumber) {
					if (onf !== 0) {
						afterLocation = this.dataList.length - 1;
						for (let i = index + 1; i < this.dataList.length; i++) {
							list.push(this.dataList[i]);
						}
					} else {
						afterLocation = this.dataList.length - 1;
					}
				} else {
					afterLocation = index + dotNumber;
					for (let i = index + 1; i <= index + dotNumber; i++) {
						list.push(this.dataList[i]);
					}
				}
				console.log('总视频数：' + list.length);
				console.log('\n\n第一个视频下标：' + beforeLocation + '.\n' + '最后一个视频下标：' + afterLocation + '.\n\n');
				uni.setStorageSync("List", this.dataList);
				uni.setStorageSync("dataList", list);
				uni.navigateTo({
					url: '/pagesCard/friendInfoVideo/friendInfoVideo?option=' + location + '&page=' + this.pageNo +
						'&index=' + index + '&openId=' + this.friendInfo.openId + '&companyId=' + this.friendInfo
						.companyId
				})
			},
			async scrolltolower() {
				// 这里就是数据加载完以后再向后端发送数据的地方\
				if (this.firstLoad && (this.total === this.dataList.length)) return
				uni.showLoading({
					title: '加载中'
				})
				this.pageNo++;
				let payload = {
					currentOpenId: this.userInfo.openId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: 1,
					companyId: "",
					openId: this.friendInfo.openId
				}
				let res = await this.$api.getMediaList(payload)
				uni.hideLoading()
				if (res.success) {
					let msg = res.result.records.map(item => {
						item._id = item.id
						return item
					})
					msg = msg.filter(item => {
						return item.openId == this.friendOpenId
					})
					this.dataList = this.pageNo === 1 ? msg : this.dataList.concat(msg)
					this.total = res.result.total
					if ((this.total === this.dataList.length) && this.firstLoad) this.$showToast('已全部加载')
				} else {
					setTimeout(() => {
						this.$showToast(res.message)
					}, 600)
				}
				this.firstLoad = true

			},
			async getVideoList() {
				//根据 好友的 companyId 查询 对应的公司视频
				let payload = {
					currentOpenId: this.userInfo.openId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: 1,
					companyId: "",
					openId: this.friendInfo.openId
				}
				let res = await this.$api.getMediaList(payload)
				if (res.success && res.result.records) {
					this.dataList = res.result.records.map(item => {
						item._id = item.id
						return item
					})
					this.dataList = this.dataList.filter(item => {
						return item.openId == this.friendOpenId
					})

				} else {
					this.dataList = []
				}
				uni.hideLoading()

			},
			goToFriendMainPage() {
				if (this.friendInfo.id) {
					// uni.navigateTo({
					// 	url: `/pagesCard/friendMainPage/friendMainPage?cardId=${this.friendInfo.id}`
					// })
					// console.log(this.friendInfo,'this.friendInfo')
					this.$toPage('/pagesCard/friendMainPage/friendMainPage?cardId=' + this.friendInfo.id + '&openId=' +
						this.friendInfo.openId + '&unionId=' + this.friendInfo.unionId)
				} else {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					});
				}
			},
			reLoading() {
				uni.showLoading({
					title: '正在刷新'
				})
				this.pageNo = 1
				this.dataList = []
				this.getVideoList()
				uni.stopPullDownRefresh()
				uni.hideLoading()
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		background: #F7F8FA;
	}

	.card-box {
		height: 176rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: flex-start;
		padding: 32rpx;

		.header-box {
			width: 112rpx;
			height: 112rpx;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.name-box {
			margin-left: 16rpx;
			width: 382rpx;

			.name-top {
				.name-text {
					font-size: 32rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #1D2129;
					line-height: 45rpx;
				}

				.pos-text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #4E5969;
					line-height: 39rpx;
					margin-left: 16rpx;
				}
			}

			.name-btm {
				margin-top: 18rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #86909C;
				line-height: 39rpx;
			}


		}

		.check-card {
			width: 160rpx;
			height: 48rpx;
			background: #276AEE;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			opacity: 1;
			border: 2rpx solid #276AEE;
			margin-left: 16rpx;
			text-align: center;
			color: white;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 48rpx;
			margin-top: 30rpx;
		}
	}

	.title1 {
		margin: 30rpx;
		color: #999;
		font-weight: 600;
		text-shadow: #666666;

	}

	.video-box {
		background: #FFFFFF;
		margin-top: 24rpx;
		height: 96rpx;
		// padding: 0 32rpx;

		.video-title {
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #1D2129;
			line-height: 96rpx;
			// margin-left: 32rpx;
			margin-top: 26rpx;
			padding: 0 32rpx;
		}

		.scrollWp {
			width: 100%;
			height: calc(100vh - 400rpx);
			padding: 0 20rpx;
			box-sizing: border-box;

			.videoItem {
				width: 48%;
				height: 506upx;
				margin-top: 5upx;
				margin-left: 5upx;
				margin-bottom: 24rpx;
			}
		}
	}
</style>